<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            text-decoration: none;
        }

        body {
            background-color: rgb(218, 219, 220);
        }

        .box1 {
            width: 300px;
            height: 450px;
            margin: 30px;
            background-color: white;
            float: left;
        }

        .box1>div:nth-child(1) {
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .layui-timeline-item {
            width: 300px;
            height: 84px;
        }

        .layui-timeline-item img {
            margin-top: 10px;
        }

        .layui-timeline-content {
            display: inline-block;
        }

        #main {
            margin: 30px;
            width: 500px;
            height: 300px;
            background-color: white;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div>通知公告</div>
        <div>
            <div class="layui-timeline-item">
                <img src="./010_消息通知.png" alt="">
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">公司员工守则</div>
                    <div>2018-10-01</div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <img src="./010_消息通知.png" alt="">
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">关于交易手续费优惠政策通知</div>
                    <div>2018-10-19</div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <img src="./010_消息通知.png" alt="">
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">国庆节安排的通知</div>
                    <div>2018-10-01</div>
                </div>
            </div>
            <div class="layui-timeline-item">
                <img src="./010_消息通知.png" alt="">
                <div class="layui-timeline-content">
                    <div class="layui-timeline-title">818促销日：全场满500送500</div>
                    <div>2018-08-18</div>
                </div>
            </div>
        </div>
    </div>

    <div id="main">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
            legend: {
                bottom: 5,
                left: "center",
                icon: "circle",
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    fontSize: 12,
                },
                data: ["今日", "比昨日", "本周", "上周同期"],
            },
            series: [
                {
                    name: "Device Usage",
                    type: "pie",
                    radius: ["50%", "70%"], // 设置内外半径，形成环形
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: "center",
                        fontSize: 16,
                        fontWeight: "bold",
                        formatter: function () {
                            return `253090\n\n总销量`;
                        },
                        rich: {
                            total: {
                                fontSize: 22,
                                fontWeight: "bold",
                                color: "#333",
                            },
                            unit: {
                                fontSize: 14,
                                color: "#666",
                            },
                        },
                    },
                    labelLine: { show: false },
                    data: [
                        { value: 4260, name: "今日", itemStyle: { color: "#2fcc71" } },
                        { value: +3970, name: "比昨日", itemStyle: { color: "#5f87ff" } },
                        { value: 3454, name: "本周", itemStyle: { color: "#f7b344" } },
                        { value: -2390, name: "上周同期", itemStyle: { color: "#f7e244" } },
                    ],

                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>

</html>